<template>
  <view class="bg-white rounded-10 mt-2 mx-2 d-flex p-2">
			<view style="width: 226rpx; height: 226rpx;" class=" rounded over-hidden">
				<image
					:src="props.goods.photo"
					class="w-100 h-100"
				/>
			</view>
			<view class="flex-1 ml-2 ">
				<view class="font-md text-black over-hidden" style="height: 70rpx">
                    {{ props.goods.title }}
					
				</view>
					<view class="mt-2 d-flex flex-wrap">
					<view class="font-sm text text-grey" v-for="(tag, index) in props.goods.tags" :key="tag" style="max-width: 100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                        {{ tag }}<span v-if="index < props.goods.tags.length - 1">, </span>
                    </view>
				</view>
					<view class="mt-1">
						<text class="font-md font-theme-color">秒杀价 ￥{{ props.goods.seckill_price}}</text>
						<text class="ml-2 text-grey font line-through">原价 ￥{{ props.goods.origin_price}}</text>
					</view>
					<view class="mt-1 d-flex j-sb a-center">

						<text class="font-sm text-grey">
                            <template v-if="props.goods.type == TabEnum.sechecklling">
                                剩余10分钟结束
                            </template>
                            <template v-else>
                                15:00即将开抢
                            </template>
                        </text>
						<view class="text-white font px-2 py-1 bg-theme rounded">
                            <template v-if="props.goods.type == TabEnum.sechecklling">
                                任性抢
                            </template>
                            <template v-else>
                                立即预约
                            </template>
                        </view>
					</view>
				
			</view>
		</view>
</template>

<script setup>
import { TabEnum } from '../types'
/**
 * goods={
 *  id: '',
 *  photo: '',
 *  title: '',
 *  tags: ['xx', 'xx'],
 *  seckill_price: '',
 *  origin_price: '',
 *  startTime: '',
 *  endTime: '',
 *  status: '',
 * }
 */
const props = defineProps({
	goods: {
		type: Object,
		required: true
	},
    type: {
		type: String,
		default: 'seckill'
	},
    type: {
		type: Number,
		validator: (value) => {
            return [TabEnum.sechecklling, TabEnum.seckillwill].includes(value)
        }
	}
})
</script>

<style scoped lang="scss">

</style>